<template>
  <view class="container">
    <map style="width: 100%; height: 798rpx" :scale="scale" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.title }}</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <view class="chooseaddress" id="addressbox" :style="{ height: addresshieght + 'px' }">
      <view class="sonbox">
        <!-- 司机信息 -->
        <view style="display: flex; align-items: center; margin-bottom: 30rpx">
          <image :src="imgurl + driverinfo.avatar" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-right: 16rpx"></image>
          <text style="margin-right: 32rpx">指定司机</text>
          <text>{{ driverinfo.name + '-' + driverinfo.mobile }}</text>
        </view>
        <!-- 起点 -->
        <view style="display: flex; align-items: center; width: 592rpx; height: 104rpx; padding-left: 20rpx" @click="gostartaddress">
          <view style="width: 16rpx; height: 16rpx; background: #32b499; border-radius: 50%; margin-right: 24rpx"></view>
          <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
            从
            <text style="color: #32b499; padding: 0 10rpx">{{ startaddress }}</text>
            出发
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <!-- 终点 -->
        <view
          @click="goendaddress"
          style="
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            width: 592rpx;
            height: 104rpx;
            background: #f3f3f3;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding-left: 20rpx;
          "
        >
          <view style="width: 16rpx; height: 16rpx; background: #f30021; border-radius: 50%; margin-right: 24rpx"></view>
          <view style="width: 500rpx; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden">
            <text v-if="endaddress" style="color: #32b499; padding: 0 10rpx">{{ endaddress }}</text>
            <text v-else>输入您的目的地</text>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="orderbtn" @click="createorder">立即下单</view>
      </view>
    </view>
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
export default {
  data() {
    return {
      imgurl: '',
      driverinfo: {},
      driverid: '',
      latitude: 39.909,
      longitude: 116.39742,
      addresshieght: 0, // 剩余高度
      startaddress: '', //起点位置
      endaddress: '', // 终点位置
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        }
      ],
      scale: 12
    };
  },
  methods: {
    // 获取司机信息
    async getdriver() {
      const res = await this.http('/driver/mydriver', {
        driver_id: this.driverid
      });
      console.log('司机信息', res);
      this.driverinfo = res.data;
    },
    // 跳转到扫描司机下单
    createorder() {
      uni.navigateTo({
        url: '/pages/createdriverorder/createdriverorder'
      });
    },
    // 选择起点
    gostartaddress() {
      uni.navigateTo({
        url: '/pages/startaddress/startaddress'
      });
    },
    // 选择终点
    goendaddress() {
      uni.navigateTo({
        url: '/pages/endaddress/endaddress'
      });
    }
  },
  onShow() {
    // 获取剩余的高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#addressbox')
          .boundingClientRect((data) => {
            console.log('节点距离顶部的距离', data.top);
            this.addresshieght = e.screenHeight - data.top;
            console.log('节点离页面顶部的距离为' + this.addresshieght);
          })
          .exec();
      }
    });
    /// 回显信息
    if (uni.getStorageSync('startaddress')) {
      this.$nextTick(() => {
        this.latitude = uni.getStorageSync('startaddress').location.lat;
        this.longitude = uni.getStorageSync('startaddress').location.lng;
        this.startaddress = uni.getStorageSync('startaddress').title;
        this.covers[0].title = uni.getStorageSync('startaddress').title;
        this.covers[0].latitude = uni.getStorageSync('startaddress').location.lat;
        this.covers[0].longitude = uni.getStorageSync('startaddress').location.lng;
      });
    }
    if (uni.getStorageSync('endaddress')) {
      this.$nextTick(() => {
        this.endaddress = uni.getStorageSync('endaddress').title;
        this.covers[1].title = uni.getStorageSync('endaddress').title;
        this.covers[1].latitude = uni.getStorageSync('endaddress').location.lat;
        this.covers[1].longitude = uni.getStorageSync('endaddress').location.lng;
        this.scale = 11;
      });
    }
  },
  onLoad(opt) {
    if (opt.driverid) {
      this.driverid = opt.driverid;
      uni.setStorageSync('drierid', this.driverid);
    } else {
      uni.showToast({
        title: '获取司机信息失败'
      });
    }
    this.getdriver();
    this.imgurl = this.img;
    // 获取用户当前位置
    uni.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      accuracy: 'best',
      success: (res) => {
        // console.log('当前位置的经度：' + res.longitude);
        // console.log('当前位置的纬度：' + res.latitude);
        this.latitude = res.latitude;
        this.longitude = res.longitude;
        this.covers[0].latitude = res.latitude;
        this.covers[0].longitude = res.longitude;
        console.log(this.covers.latitude, this.covers.longitude);
        //地址解析
        qqmap.reverseGeocoder({
          location: {
            latitude: this.latitude,
            longitude: this.longitude
          },
          success: (res) => {
            // console.log(uni.getStorageSync('startaddress'));
            console.log(res);
            console.log('地址解析', res.result.address_reference.landmark_l2);
            uni.setStorageSync('startaddress', res.result.address_reference.landmark_l2);
            this.startaddress = uni.getStorageSync('startaddress').title;
            this.covers[0].title = uni.getStorageSync('startaddress').title;
          }
        });
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.customCallout {
  box-sizing: border-box;
  background-color: #32b499;

  border-radius: 30rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container {
  box-sizing: border-box;

  .chooseaddress {
    box-sizing: border-box;
    background: linear-gradient(180deg, #3194f4, #336ff7, 60%, #ededed);
    padding: 50rpx 26rpx;
    .sonbox {
      box-sizing: border-box;
      width: 698rpx;
      height: 534rpx;
      background: #ffffff;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      padding: 34rpx 46rpx;
      .orderbtn {
        width: 620rpx;
        height: 92rpx;
        text-align: center;
        line-height: 92rpx;
        background: #3483f6;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 48rpx;
      }
    }
  }
}
</style>
<style>
page {
  height: 100vh;
  overflow: hidden;
}
</style>
